1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { ArrowDownOnSquareIcon, ArrowDownTrayIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
import AppBar from "../../../components/AppBar";
import Layout from "../../../components/Layout";
import LineDivider from "../../../components/LineDivider";
import WithAuth from "../../../components/WithAuth";
import { useState } from "react";
const Row = ({ label, children }) => (
<div className="grid grid-cols-2">
<p className="leading-normal text-gray_r-11">{ label }</p>
<div className="text-right leading-normal">
{ children }
</div>
</div>
);
const Section = ({ children }) => (
<div className="px-4 pb-4 flex flex-col gap-y-4">
{ children }
</div>
);
const TitleRow = ({ label, active, onClick }) => (
<div className="flex justify-between p-4" onClick={onClick}>
<p className="font-medium leading-normal">{ label }</p>
{ onClick && ( active ? (
<ChevronUpIcon className="w-5 h-5" />
) : (
<ChevronDownIcon className="w-5 h-5" />
) ) }
</div>
);
export default function DetailTransactions() {
const [ activeSection, setActiveSection ] = useState({
purchase: false,
shipping: false,
invoice: false,
});
const toggleSection = ( name ) => {
setActiveSection({
...activeSection,
[name]: !activeSection[name]
});
};
return (
<WithAuth>
<Layout>
<AppBar title="Detail Transaksi" />
<div className="text-caption-1">
<div className="p-4 flex flex-col gap-y-4">
<Row label="Status Transaksi">
<span className="badge-green">Pending Quotation</span>
</Row>
<Row label="No Transaksi">SO/2023/03212</Row>
<Row label="Purchase Order">PO/2023/02123</Row>
<Row label="Dokumen PO"><a href="">Download</a></Row>
<Row label="Metode Pembayaran">BCA Transfer</Row>
<Row label="Ketentuan Pembayaran">Cash Before Delivery</Row>
<Row label="Nama Sales">Rafi Zadanly</Row>
<Row label="Waktu Transaksi">01 Januari 2023</Row>
</div>
<LineDivider />
<TitleRow
label="Detail Produk"
active={false}
/>
<LineDivider />
<TitleRow
label="Detail Pembeli"
active={activeSection.purchase}
onClick={() => toggleSection('purchase')}
/>
{ activeSection.purchase && (
<Section>
<Row label="Nama">John Doe</Row>
<Row label="Email">johndoe@gmail.com</Row>
<Row label="No Telepon">081223538754</Row>
<Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
</Section>
) }
<LineDivider />
<TitleRow
label="Detail Pengiriman"
active={activeSection.shipping}
onClick={() => toggleSection('shipping')}
/>
{ activeSection.shipping && (
<Section>
<Row label="Nama">John Doe</Row>
<Row label="Email">johndoe@gmail.com</Row>
<Row label="No Telepon">081223538754</Row>
<Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
</Section>
) }
<LineDivider />
<TitleRow
label="Detail Penagihan"
active={activeSection.invoice}
onClick={() => toggleSection('invoice')}
/>
{ activeSection.invoice && (
<Section>
<Row label="Nama">John Doe</Row>
<Row label="Email">johndoe@gmail.com</Row>
<Row label="No Telepon">081223538754</Row>
<Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
</Section>
) }
</div>
</Layout>
</WithAuth>
);
}
|
